<template>
	<div class="home">
		<el-row>
			<el-col :span="16">
				<div class="login-left">
					<h2>让合作，</h2>
					<h2>更进一步！</h2>
					<p style="padding-top: 50px;">简单明了的约定，</p>
					<p>给了我们合作成长的方向，
					<p>
					<p>相信这次的合作定会让我们的未来变得更加完美，</p>
					<p>定会让我们的生活变得更加明媚。</p>
					<p style="padding-top: 50px;">“合作发展，共创未来”</p>
					<p>“携手共进，合作共赢”</p>
				</div>
			</el-col>
			<el-col :span="8" class="login-right">
				<div class="title">快步商家管理系统</div>
				<div class="form">
					<el-form ref="form" :model="form" label-position="left">
						<el-form-item label="账号">
							<el-input v-model="form.userName" clearable placeholder="请输入你的账号"></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input type="password" v-model="form.password" placeholder="请输入你的密码" show-password
								clearable></el-input>
						</el-form-item>
						<el-checkbox v-model="checked" @change="checkboxChange">记住密码</el-checkbox>
						<el-form-item size="large">
							<el-button type="primary" @click="onSubmit" style="width: 100%;margin-top: 40px;">登录
							</el-button>
						</el-form-item>
					</el-form>
				</div>
				<p class="copy">&copy;2020-2021 All Rights Reserved. 快步科技管理中心</p>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import axios from 'axios';
	export default {
		data() {
			return {
				form: {
					userName: '',
					password: localStorage.getItem('password') ? localStorage.getItem('password') : ''
				},
				checked: localStorage.getItem('checked') ? true : false,
				AVAILABLESTATUS: {
					0: '正常',
					1: '该商家已禁用，请联系客服',
					2: '该商家已删除，请联系客服'
				}
			}
		},
		methods: {
			//记住密码
			checkboxChange(val) {
				if (this.form.password && val) {
					localStorage.setItem('password', this.form.password);
					localStorage.setItem('checked', val);
				} else {
					localStorage.removeItem('checked');
					localStorage.removeItem('password');
				}
			},
			onSubmit() {
				localStorage.removeItem('token');
				this.$http.post(this.$api.login, {
					userName: this.form.userName,
					password: this.form.password ? this.$md5(this.form.password) : ""
				}).then(res => {
					if (res.code == 0) {
						localStorage.setItem('token', res.data.access_token);
						this.getData();
					} else {
						this.$notify.error({
							title: '错误',
							message: res.msg
						});
						this.animate = 'shake';
					}
				})
			},
			getData() {
				var _this = this;
				this.$http.get(this.$api.roles).then(res => {
					if (res.code == 0) {
						if (res.data.length == 1 && res.data[0].type == 2) {
							if (res.data[0].availableStatus == 0) {
								localStorage.setItem('merchantId',res.data[0].merchantId);
								localStorage.setItem('merchantShortName',res.data[0].merchantShortName);
								let hostname = window.location.hostname;
								if (hostname == '47.108.181.177') {
									window.location.href = 'http://47.108.181.177:4005/baseInfo/storeSettings?token='+localStorage.getItem('token')
								} else {
									window.location.href = 'https://shangjia.kuaibuapp.com/baseInfo/storeSettings?token='+localStorage.getItem('token')
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: this.AVAILABLESTATUS[res.data[0].availableStatus]
								});
							}
						} else if (res.data.length == 1 && res.data[0].type == 1) {
							if (res.data[0].availableStatus == 0) {
								localStorage.setItem('merchantId',res.data[0].merchantId);
								localStorage.setItem('merchantShortName',res.data[0].merchantShortName);
								this.$router.push('/merchantInfo')
							} else {
								this.$notify.error({
									title: '错误',
									message: this.AVAILABLESTATUS[res.data[1].availableStatus]
								});
							}
						} else {
							this.$router.push('/home');
						}
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.home {
		width: 100%;
		min-width: 980px;
		overflow: hidden;
	}

	.login-left {
		background-image: url('../assets/login-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100vh;
		color: white;
		padding-left: 111px;
		padding-top: 140px;

		h2 {
			font-size: 35px;
			font-weight: bold;
		}

		p {
			line-height: 30px;
			font-size: 16px;
		}
	}

	.login-right {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.title {
			font-size: 18px;
			color: #017EFF;
			padding-top: 100px;
		}

		.form {
			width: 100%;
			padding: 60px;

			::v-deep {
				.el-input__inner {
					border: none;
					border-radius: 0;
					border-bottom: 1px solid #DCDFE6;
				}
			}
		}

		.copy {
			font-size: 12px;
			color: #BBBBBB;
			position: absolute;
			text-align: center;
			width: 100%;
			bottom: 20px;
		}
	}
</style>
